<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import * as echarts from "echarts";

import { watch } from "vue";
const chartRef = ref(null);
let myChart;

const props = defineProps({
  option: {
    type: Object,
    default: () => {},
  },
});

watch(
  () => props.option,
  (newVal) => {
    myChart.setOption(newVal);
    const { series } = newVal;
    if (!series[0].data.length) {
      myChart.showLoading({
        text: "暂无数据",
        showSpinner: false,
        textColor: "#409EFF",
        maskColor: "transparent",
        fontSize: "14px",
        // fontWeight: "bold",
      });
    } else {
      myChart.hideLoading();
    }
  },
  { deep: true }
);

onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  myChart = echarts.init(chartRef.value);
  props.option && myChart.setOption(props.option);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
</script>
